import React, { useState, useEffect } from "react";
import styles from "../component/index.module.less";
import { Image } from "antd";
import CommonZjfImg from "@/views/components/CommonZjfImg/index.jsx";

export default ({}) => {
	const defaultColumns = [
		{
			name: "系统商品名称",
			code: "skuName",
			width: 250,
			render: (text, record) => {
				return (
					<div className={styles.goodsBox}>
						<div className={styles.goodsImg}>
							<img src={record.skuImage} />
						</div>
						<div className={styles.goodsContent}>
							<div className="textOverflowMultiTwo">{record.skuName}</div>
							<div className="textOverflowMultiOne">{record.skuSpec}</div>
							<div>
								<span>商品编码：</span>
								<span>{record.skuCode}</span>
							</div>
							{/* <div>
								<span>价格：</span>
								<span className="common-color9">¥{record.purchasePrice}</span>
							</div> */}
						</div>
					</div>
				);
			}
		},
		{
			name: "供应商",
			code: "supplierName",
			width: 100
		},
		{
			name: "供应商商品名称",
			code: "skuName",
			width: 250,
			render: (text, record, index) => {
				return <div>{goodsNameRender(record, index)}</div>;
			}
		},
		{
			name: "原入库数",
			code: "originalNum",
			width: 100
		},
		{
			name: "实际入库数",
			code: "actualNum",
			width: 100,
			render: (text, record) => <span style={{ color: "rgba(0, 188, 117, 1)" }}>{text ? text : 0}</span>
		}
	];
	const defaultColumns1 = [
		{
			name: "操作人账户",
			code: "operator"
		},
		{
			name: "操作界面",
			code: "type"
		},
		{
			name: "操作类型",
			code: "subType"
		},
		{
			name: "操作事件",
			code: "action"
		},
		{
			name: "操作时间",
			code: "createTime"
		}
	];
	//供应商商品名称的渲染
	const goodsNameRender = (record, index) => {
		if(!record.supplierSkuName) {
			return null;
		}
		return (
			<div className={styles.goodsBox}>
				<div className={styles.goodsImg}>
					<CommonZjfImg img={record.supplierSkuImage} style={{ width: '48px', height: '48px' }} storeId={record.supplierId} />
				</div>
				<div className={styles.goodsContent}>
					{record.supplierSkuName && <div className="textOverflowMultiTwo">{record.supplierSkuName}</div>}
					{record.supplierSkuSpec && <div className="textOverflowMultiOne">{record.supplierSkuSpec}</div>}
					{record.supplierSkuId && <div>
						<span>商品编码：</span>
						<span>{record.supplierSkuId}</span>
					</div>}
					{/* <div>
						<span>价格：</span>
						<span className="common-color9">¥{record.supplierSkuPrice}</span>
					</div> */}
				</div>
			</div>
		);
	};
	return { defaultColumns, defaultColumns1 };
};
